<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无间断的图片循环滚动效果</title>
  <style>
    #box{
      width: 750px;
      margin: 0 auto;
      overflow: hidden;
      border: 1px solid #0000FF;
    }
    #inner{
      width: 800%;
    }
    #div1{
      float: left;
    }
    #div2{
      float: left;
    }
    img{
      width: 110px;
      height: 89px;
      float: left;
    }
  </style>
</head>
<body>
<div id="box">
  <div id="inner">
    <div id="div1">
      <img src="1.jpg">
      <img src="2.jpg">
      <img src="3.jpg">
      <img src="4.jpg">
      <img src="5.jpg">
      <img src="6.jpg">
      <img src="7.jpg">
      <img src="8.jpg">
      <img src="9.jpg">
      <img src="10.jpg">
      <img src="11.jpg">
      <img src="12.jpg">
    </div>
    <div id="div2"></div>
  </div>
</div>
<script type="text/javascript">
  var box=document.getElementById("box");
  var div1=document.getElementById("div1");
  var div2=document.getElementById("div2");
  var n=5;  //数值越小图片滚动的越快
  div2.innerHTML=div1.innerHTML;
  var Mycheck;
  function move(){
      if(div2.offsetWidth-box.scrollLeft<=0)
          box.scrollLeft-=div1.offsetWidth;
      else
          box.scrollLeft++;
      Mycheck=setTimeout(move,n);
  }
  box.onmouseover=function(){clearTimeout(Mycheck);}
  box.onmouseout=function(){Mycheck=setTimeout(move,n);}
  move();
</script>
</body>
</html>
